<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>html5 canvas demo (canvas state) -- zswang 2010</title>
		<style type="text/css">
			#divTools{
				position:absolute;
				left:10px;
				top:10px;
				height:27px;
			}
			#divCanvas{
				position:absolute;
				left:10px;
				top:40px;
				border:solid red 1px;
			}
			#divCode{
				position:absolute;
				left:415px;
				top:40px;
				height:400px;
				width:400px;
				border:dotted blue 1px;
			}
			#preCode{
				padding:0;
				margin:0;
			}
		</style>
	</head>
	<body>
		<div id="divTools"></div>
		<div id="divCanvas"><canvas id="canvas" width="400" height="400"></canvas></div>
		<div id="divCode"><pre id="preCode"></pre></div>
		<script>
			var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"),
				divTools = document.getElementById("divTools"),
				preCode = document.getElementById("preCode");
			/**
			 * 添加测试代码
			 * @param {String} text 测试主题
			 * @param {Function} func 执行函数
			 */
			function addCase(text, func) {
				var button = document.createElement("input");
				button.type = "button";
				button.value = text;
				button.onclick = function(){
					context.save();
					func();
					context.restore();
				};
				button.onmouseover = function(){
					preCode.innerHTML = ("" + func).replace(/[<>&]/g, function(all) {
						return { "<": "&lt;", ">": "&gt;", "&": "&amp;" }[all];
					});
				};
				divTools.appendChild(button);
			}
			
			addCase("清除画布", function() {
				context.clearRect(0, 0, canvas.width, canvas.height);
			});
			addCase("画红边矩形", function() {
				context.strokeStyle = "red";
				context.strokeRect(10, 10, 100, 100);
			});
			addCase("恢复状态", function() {
				context.save();
				context.strokeStyle = "blue";
				context.strokeRect(60, 60, 100, 100);
				context.restore();
				context.strokeRect(20, 20, 100, 100);
			});
			addCase("状态堆栈", function() {
				context.strokeRect(50, 50, 80, 80);
				context.save();
				context.strokeStyle = "blue";
				context.strokeRect(100, 100, 80, 80);
				context.save();
				context.strokeStyle = "green";
				context.strokeRect(150, 150, 80, 80);
				context.restore();
				context.strokeRect(200, 200, 80, 80);
				context.restore();
				context.strokeRect(250, 250, 80, 80);
			});
			addCase("原点坐标偏移", function() {
				context.translate(100, 100);
				context.strokeRect(-10, -10, 100, 100);
			});
			addCase("旋转", function() {
				context.translate(100, 100);
				context.rotate(0.3 * Math.PI);
				context.strokeRect(0, 0, 100, 100);
			});
			addCase("绘制线条", function() {
				var y = 10;
				context.fillStyle = "red";
				context.strokeStyle = "blue";
				
				context.fillRect(20, y, 200, 25);
				context.strokeRect(20, y, 200, 25);
				context.beginPath();
				context.moveTo(250, y);
				context.lineTo(350, y);
				context.stroke();
				y += 40;
				
				context.lineCap = "square";
				context.lineWidth = 5;
				context.lineJoin = "round"; 
				context.fillRect(20, y, 200, 25);
				context.strokeRect(20, y, 200, 25);
				context.beginPath();
				context.moveTo(250, y);
				context.lineTo(350, y);
				context.stroke();
				y += 40;
				
				context.lineCap = "round";
				context.lineJoin = "bevel"; 
				context.fillRect(20, y, 200, 25);
				context.strokeRect(20, y, 200, 25);
				context.beginPath();
				context.moveTo(250, y);
				context.lineTo(350, y);
				context.stroke();
				y += 40;
				
				context.lineCap = "butt";
				context.lineJoin = "miter"; 
				context.fillRect(20, y, 200, 25);
				context.strokeRect(20, y, 200, 25);
				context.beginPath();
				context.moveTo(250, y);
				context.lineTo(350, y);
				context.stroke();
				y += 40;
				
				context.fillRect(20, y, 200, 25);
				context.strokeRect(20, y, 200, 25);
				context.beginPath();
				context.moveTo(250, y);
				context.lineTo(350, y);
				context.stroke();
				y += 40;

				context.fillRect(20, y, 200, 25);
				context.strokeRect(20, y, 200, 25);
				context.beginPath();
				context.moveTo(250, y);
				context.lineTo(350, y);
				context.stroke();
				y += 40;
			});
			addCase("getContext(\"3d\")", function() {
				try {
					canvas.getContext("3d");
				} catch(ex) {
					alert(ex.message); // Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMHTMLCanvasElement.getContext]
				}
			});
		</script>
	</body>
</html>